<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../Css/style.css" />
    <script type="text/javascript" src="../Js/jquery.js"></script>
    <script type="text/javascript" src="../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../Js/ckform.js"></script>
    <script type="text/javascript" src="../Js/common.js"></script>

 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
        .warning{
            border-color: red !important;
        }

    </style>
</head>
<body>
<form action="index.html" method="post" class="definewidth m20">
<input type="hidden" name="id" value="{$user.id}" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">资源名称</td>
            <td><input onblur="mNameCheck(this.value)" type="text" name="mName"/></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input onblur="urlCheck(this.value)" type="text" name="mUrl"/></td>
        </tr>
        <tr>
            <td class="tableleft">是否有效</td>
            <td>
                <input type="radio" name="mState" value="0" checked/> 有效
                <input type="radio" name="mState" value="1" /> 无效
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button onclick="editMenu()" class="btn btn-primary" type="button">修改</button>&nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    // 获取地址栏参数
    let mId = document.location.toString().GetValue("mId");
    // url是否检测标志
    let urlCheckFlat = false;
    // url是否可用标志
    let urlIsValid = true;
    // mName检测通过标志
    let mNameCheckFlag = false;
    // 发送更新标志,一旦执行即锁死,防止多次请求
    let sendUpdateFlag = true;
    // 设置定时器, 防止onblur和onclick发生冲突, 确保onclick先执行
    let urlCheckTime;
    let mNameCheckTime;
    // 原始mName
    let oldMName;
    // url首次检测标志
    let urlFirstCheck = true;
    // 强制修改url有效标志
    let forcedModify = false;
    // 资源有效性检测
    function urlCheck(url){
        urlCheckTime = setTimeout(function(){
            // 只要修改url,就必须等待检测完成才能提交
            urlCheckFlat = false;
            if(url.trim() === "" ){
                layer.msg("资源URL不能为空", function(){})
                $("input[name='mUrl']").addClass("warning");
            }else{
                $("input[name='mUrl']").removeClass("warning");
                layer.load(0);
                let pUrl = "";
                if(crossDomainMode){
                    pUrl = projectUrl + "/";
                }
                $.ajax({
                    type: "GET",
                    // url: origin + "/" + url,
                    url: pUrl + url,
                    data: {jwtToken:jwtToken},
					xhrFields: {
					   withCredentials: true
					},
					crossDomain: true,
                    async: true,
                    timeout: 1000,
                    success: function (data) {
                        urlCheckFlat = true;
                        layer.closeAll();
                        $("input[name='mUrl']").removeClass("warning");
                        urlIsValid = true;
                        // 不是第一次检测再弹框
                        if( !urlFirstCheck ){
                            layer.msg("检测到URL可用")
                        }
                        urlFirstCheck = false;
                    },
                    error: function (){
                        urlCheckFlat = true;
                        layer.closeAll();
                        urlIsValid = false;
                        // 没有设置强制设置
                        if( !forcedModify ){
                            $(':radio[name="mState"]').eq(1).prop("checked",true)
                            $(':radio[name="mState"]').eq(0).attr("checked",false)
                            // 不是第一次检测再弹框
                            if( !urlFirstCheck ) {
                                layer.msg("检测到URL不可用")
                            }
                        }
                        urlFirstCheck = false;
                    }
                })
            }
        }, 120)
    }
    // 资源名的唯一性验证, 非空
    function mNameCheck(mName){
        mNameCheckFlag = false;
        mNameCheckTime = setTimeout(function(){
            if(mName == null || mName === "" || mName === undefined){
                layer.msg("资源名不能为空", function(){})
                $("input[name='mName']").addClass("warning")
            }else{
                if(mName == oldMName.trim()){
                    mNameCheckFlag = true;
                    $("input[name='mName']").removeClass("warning");
                }else{
                    $.ajax({
                        type: "GET",
                        url: origin + "/menu/m-name/" + mName,
                        data: {jwtToken:jwtToken},
						xhrFields: {
						   withCredentials: true
						},
						crossDomain: true,
                        async: false,
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 200){
                                mNameCheckFlag = true;
                                $("input[name='mName']").removeClass("warning")
                            }else{
                                layer.msg("资源名已存在，请重新输入。", function(){})
                                mNameCheckFlag = false;
                                $("input[name='mName']").addClass("warning");
                            }
                        }
                        ,complete : function(xhr, status) {
                            myComplete(xhr, status);
                        }
                    })
                }
            }
        }, 120)
    }
    // 修改
    function editMenu(){
        // 防止onblur和onclick发生冲突, 确保onclick先执行
        clearTimeout(mNameCheckTime);
        clearTimeout(urlCheckTime);
        layer.load(0);
        let mName = $("input[name='mName']").val().trim();
        let mUrl = $("input[name='mUrl']").val().trim();
        // 所有信息再次检测一遍
        urlCheck(mUrl);
        mNameCheck(mName);
        // 延时确保ajax已经发送
        setTimeout(function(){
            // 资源有效性检测
            if(urlCheckFlat === false){
                return false;
            }
            // 资源名唯一非空检测
            if(mNameCheckFlag === false){
                return false;
            }
            // 检测中值可能会变更,所有要放到最后获取
            let mState = $("input[name='mState']:checked").val().trim();
            if(sendUpdateFlag){
                // 一旦执行即死锁, 防止重复提交
                sendUpdateFlag = false;
                layer.load(0)
                $.ajax({
                    type: "POST",
                    url: origin + "/menu/" + mId,
                    data: {mUrl:mUrl,mState:mState,mName:mName,_method:"PUT",jwtToken:jwtToken},
					xhrFields: {
					   withCredentials: true
					},
					crossDomain: true,
                    dataType: "json",
                    success: function (data) {
                        layer.closeAll()
                        if (data.code == 200){
                            layer.msg("修改成功")
                            setTimeout(function(){
                                // 返回index
                                $('#backid').trigger("click");
                            },500)
                        }else{
                            layer.msg(data.msg,function(){})
                        }
                    },
                    complete : function(xhr, status) {
                        myComplete(xhr, status);
                    }
                })
            }
        }, 1500)
    }

    // 根据id查询数据并填充
    function queryByMId(){
        $.ajax({
            type: "GET",
            url: origin + "/menu/" + mId,
            data: {jwtToken:jwtToken},
			xhrFields: {
			   withCredentials: true
			},
			crossDomain: true,
            dataType: "json",
            success: function (data) {
                layer.closeAll()
                if (data.code == 200){
                    let menu = data.obj;
                    // 填充mName
                    $("input[name='mName']").val(menu.mName)
                    // 保存原始mName
                    oldMName = menu.mName;
                    // 填充url
                    $("input[name='mUrl']").val(menu.mUrl)
                    // 填充mState
                    if(menu.mState == 0){
                        $(':radio[name="mState"]').eq(0).prop("checked",true)
                        $(':radio[name="mState"]').eq(1).attr("checked",false)
                    }else{
                        $(':radio[name="mState"]').eq(1).prop("checked",true)
                        $(':radio[name="mState"]').eq(0).attr("checked",false)
                    }
                    // url检测, 真失效不可改有效, 真有效不限制
                    urlCheck(menu.mUrl)
                }else{
                    layer.msg(data.msg,function(){})
                }
            },
            complete : function(xhr, status) {
                myComplete(xhr, status);
            }
        })
    }
    $(function () {
        // 根据id查询数据并填充
        queryByMId();
        // 返回列表
        $('#backid').click(function(){
            window.location.href="index.html?pageNum=" + globalPageNum + "&pageSize=" + globalPageSize;
        });
        // 监听mState
        $("input[name='mState']").on("click", function(){
            if(!urlIsValid && $(':radio[name="mState"]').eq(0).prop("checked")){
                if(confirm("检测到URL无效或非本服务器站点，确定要强制更改为有效使用吗？")){
                    // 强制修改标志
                    forcedModify = true;
                } else {
                    // 取消强制修改
                    forcedModify = false;
                    $(':radio[name="mState"]').eq(1).prop("checked",true)
                    $(':radio[name="mState"]').eq(0).attr("checked",false)
                }
            }
        })
    });
    </script>